<template>
  <div class="dashboard-editor-container">
    <div class=" clearfix">
      <pan-thumb :image="avatar" style="float: left">
        Your roles:
        <span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
      </pan-thumb>
      <github-corner style="position: absolute; top: 0px; border: 0; right: 0;" />
      <div class="info-container">
        <span class="display_name">{{ name }}</span>
        <span style="font-size:20px;padding-top:20px;display:inline-block;">Editor's Dashboard</span>
      </div>
    </div>
    <div>
      <img :src="emptyGif" class="emptyGif">
    </div>
  </div>
</template>

<script>
export default {
  name: 'DashboardEditor'
}
</script>

<script setup>
import { getCurrentInstance, ref } from 'vue'
import PanThumb from '@/components/PanThumb'
import GithubCorner from '@/components/GithubCorner'
const { proxy } = getCurrentInstance()
const emptyGif = ref('https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3')

const { name, avatar, roles } = proxy.$useGetters('', ['name', 'avatar', 'roles'])

</script>

<style lang="scss" scoped>
.emptyGif {
  display: block;
  width: 45%;
  margin: 0 auto;
}

.dashboard-editor-container {
  background-color: #e3e3e3;
  min-height: 100vh;
  padding: 50px 60px 0px;
.pan-info-roles {
  font-size: 12px;
  font-weight: 700;
  color: #333;
  display: block;
}
.info-container {
  position: relative;
  margin-left: 190px;
  height: 150px;
  line-height: 200px;
.display_name {
  font-size: 48px;
  line-height: 48px;
  color: #212121;
  position: absolute;
  top: 25px;
}
}
}
</style>
